<template><div>
       <header-two v-bind:title="item.title" ></header-two>
       <container-component  v-bind:containerFull="data.containerFull"  >
		<article class="weui-article" >
			<section> 
			         <section style="">
			                <p>
			                    <img v-bind:src="item.images.large" alt=""> 
			                </p>
			         </section> 
			         <section> 
			            <h1>{{item.title}}({{item.year}}) </h1>
			            <section>
			                <h2 class="title">{{item.original_title}}</h2>
			                <p>
			                    {{item.summary}}
			                </p> 
			            </section>
			          </section>  
			</section>
		</article>
       </container-component>
</div></template>

<script> 
  import headerTwo from '../components/HeaderTwo.vue'; 
  import containerComponent from '../components/Container.vue'; 
  import common from '../common/common.js';
  import reqApi from '../requestApi.js';
  
  export default { 
    data () {
      return { 
            item : [],
            data : {
            	    containerFull : {
            	    	height : true,
            	             width : false
            	    }
            }
        } 
    }, 
    created (){
          let GET = common.GET();  
          let me = this;
          $.ajax({ 
               url : `${reqApi.baseDir}subject.json?type=${GET['type']}`,
               type : "GET", 
               data : "json",
               success : function (itemData) { 
                       me.item = itemData; 
               }
          });
    },    
    components: { 
         headerTwo,
         containerComponent
    } 
  }
</script>

<style>
.full {
  margin: 0px;
  padding: 0px;
}
</style>